<template>
	<!-- 现货订单 新建 -->
	<div class="mainContent sportnew">
        <pathTracking :path='Model.path' />
		<div class="container">
			<el-row>
				<div class="common-table-title">
					<div class="common-table-icon"></div>
					<div class="common-table-fl">新建订单</div>
				</div>
			</el-row>
			<!-- 第一步 -->
			<el-row class="steps">
				<div class="nav-title">
					<div class="number">1</div>
					<p class="font">第一步：用户基础信息</p>
					<img v-if="Model.firstStep" @click="Model.firstStep = !Model.firstStep" class="img" src="@/assets/img/icon_collapse.png"
					 alt="">
					<img v-else @click="Model.firstStep = !Model.firstStep" class="img" src="@/assets/img/icon_unfold.png" alt="">
				</div>
				<div class="step-item" v-show="Model.firstStep">
					<!-- 男士身份证 -->
					<el-row class="rows basic">
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									男士身份证
								</label>
								<el-input class="input-cont" v-model="Model.params.idCard" placeholder="请输入内容"></el-input>
							</div>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<div class="btn" @click="findman">查询</div>
							</div>
						</el-col>
					</el-row>
					<el-row>
						<el-col>
							<div class="items payitem" v-if="Model.womanRingStatus">
								<label class="" for="">是否有女戒购买记录:</label>
								<label class="" for="" v-if="Model.womanRingPay">有记录</label>
								<label class="" for="" v-if="!Model.womanRingPay">无记录</label>
							</div>
						</el-col>
					</el-row>
					<!-- 客户信息第一部分 -->
					<el-row class="rows basic">
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									客户手机号
								</label>
                                <label>{{Model.params.mobile}}</label>
							</div>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									男士姓名
								</label>
                                <label>{{Model.params.manName}}</label>
							</div>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									女士联系方式
								</label>
                                <label>{{Model.params.ladiesPhone}}</label>
							</div>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									女士姓名
								</label>
                                <label>{{Model.params.womanName}}</label>
							</div>
						</el-col>
                        <el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									配送方式
								</label>
								<el-select class="input-cont" v-model="Model.params.shippingMethod" @change="deliveryWay" placeholder="请输入内容">
									<el-option label="快递" value="0"></el-option>
									<el-option label="自提" value="1"></el-option>
								</el-select>
							</div>
						</el-col>
                        <el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									发货门店
								</label>
								<!-- 3.15修改字段为theFactory； xumeng -->
								<el-select class="input-cont" v-model="Model.params.shipper" placeholder="请输入内容">
									<el-option
										v-for="(store,index) in Model.deliverStores"
										:key="index"
										:label="store.theNameOfTheStore"
										:value="store.theFactory">
									</el-option>
								</el-select>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-row>
			<!-- 第一步end -->
			<!-- 第二步 -->
			<el-row class="steps">
				<div class="nav-title">
					<div class="number">2</div>
					<p class="font">第二步：添加订单商品</p>
					<img v-if="Model.secondStep" @click="Model.secondStep = !Model.secondStep" class="img" src="@/assets/img/icon_collapse.png"
					 alt="">
					<img v-else @click="Model.secondStep = !Model.secondStep" class="img" src="@/assets/img/icon_unfold.png" alt="">
				</div>
				<div class="step-item" v-show="Model.secondStep">
					<el-row class="addbtn">
						<div class="cont">
							<img class="plus" src="@/assets/img/button_plus.png" alt="">
							<p class="font" @click="addGoods('single')">添加单个商品</p>
						</div>
					</el-row>
					<el-row class="rows tables">
						<el-table :data="Model.mainTableData" max-height="550" stripe show-summary :summary-method="getSummaries">
                            <el-table-column
                                prop="photoUrl"
                                align="center" 
                                label='主图'
                                >
                                <template slot-scope="scope">
                                    <div class="scopecont">
                                        <el-tooltip placement="top" effect="light">
                                            <div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
                                            <img class="mainTableImg" :src="scope.row.photoUrl" alt="">
                                        </el-tooltip>
                                    </div>
                                </template>
                            </el-table-column>
							<el-table-column v-for="(item,index) in Model.tableHeaderData" align="center" :key="item.prop" :prop="item.prop"
							 :label="item.label" :width="item.width">
							</el-table-column>
							<el-table-column align="center" fixed="right" label="操作" width="160">
								<template slot-scope="scope">
									<!-- <div class="operate-btn disabled"  v-if="scope.row.isExpedited" @click="handleClickApproval(scope.row)">已加急</div>
									<div class="operate-btn" v-else @click="handleClickApproval(scope.row)">加急</div> -->
									<div class="operate-btn" @click="handleClickDelete(scope.row)">删除</div>
								</template>
							</el-table-column>
						</el-table>
					</el-row>
					<!-- 表格下表单 -->
					<el-row class="rows basic3">
						<el-col :sm="24" :md="16" :lg="12">
							<div class="items">
								<label class="label" for="">销售备注</label>
								<el-input type="textarea" v-model="Model.params.remarks"></el-input>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-row>
			<!-- 第二步end -->
			<!-- 第三步 -->
			<el-row class="steps" v-show="Model.params.shippingMethod == '0'">
				<div class="nav-title">
					<div class="number">3</div>
					<p class="font">第三步：添加收货信息</p>
					<img v-if="Model.thirdStep" @click="Model.thirdStep = !Model.thirdStep" class="img" src="@/assets/img/icon_collapse.png"
					 alt="">
					<img v-else @click="Model.thirdStep = !Model.thirdStep" class="img" src="@/assets/img/icon_unfold.png" alt="">
				</div>
				<div class="step-item" v-show="Model.thirdStep">
					<el-row class="addbtn">
						<div class="cont">
							<img class="plus" src="@/assets/img/button_plus.png" alt="">
							<p class="font" @click="Model.changeAddress = true">选择用户收货地址</p>
						</div>
					</el-row>
					<!-- 收货信息第一部分 -->
					<el-row class="rows basic2">
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									收件人姓名
								</label>
								<el-input class="input-cont" v-model="Model.checkedAddress.recipientName" placeholder="请输入内容"></el-input>
							</div>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									收件人手机号
								</label>
								<el-input class="input-cont" v-model="Model.checkedAddress.recipientPhone" placeholder="请输入内容"></el-input>
							</div>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									短信通知手机
								</label>
								<el-input class="input-cont" v-model="Model.checkedAddress.informPhone" placeholder="请输入内容"></el-input>
							</div>
						</el-col>
					</el-row>
					<!-- 收货信息第二部分 -->
					<el-row class="rows basic2">
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									收件地址类型
								</label>
								<el-radio v-model="Model.checkedAddress.addressType" label="0">大陆</el-radio>
								<el-radio v-model="Model.checkedAddress.addressType" label="1">海外</el-radio>
							</div>
						</el-col>
					</el-row>
					<!-- 收货信息第三部分 -->
					<el-row class="rows basic2">
						<el-col :sm="24" :md="16" :lg="12">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									收件人地区
								</label>
								<el-cascader :options="Model.options" @active-item-change="handleItemChange" @change="changecascards" :props="Model.props"
								 v-model="Model.selectedOptions3"></el-cascader>
								<!-- <div v-for="i in Model.testArrs">
									label:{{i.label}} - value{{i.value}}
								</div> -->
							</div>
						</el-col>
					</el-row>
					<el-row class="rows basic">
						<el-col :sm="24" :md="16" :lg="12">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									详细地址
								</label>
								<el-input class="input-cont" v-model="Model.checkedAddress.detailedAddress" placeholder="如道路、门牌号、小区、楼栋号、单元式等"></el-input>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-row>
			<!-- 第三步end -->
			<!-- 第三步 自提 -->
			<el-row class="steps" v-show="Model.params.shippingMethod == '1'">
				<div class="nav-title">
					<div class="number">3</div>
					<p class="font">第三步：选择自提门店</p>
					<img v-if="Model.thirdStep2" @click="Model.thirdStep2 = !Model.thirdStep2" class="img" src="@/assets/img/icon_collapse.png"
					 alt="">
					<img v-else @click="Model.thirdStep2 = !Model.thirdStep2" class="img" src="@/assets/img/icon_unfold.png" alt="">
				</div>
				<div class="step-item" v-show="Model.thirdStep2">
					<el-row class="rows basic2">
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									自提店铺城市
								</label>
								<el-select class="input-cont" v-model="Model.userSelfLift.takeGoodsShopCity" @change="queryStore" filterable
								 placeholder="请输入内容">
									<el-option v-for="(city,index) in Model.allCities" :key="index" :label="city.cityName" :value="city.cityName">
									</el-option>
								</el-select>
							</div>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									自提店铺
								</label>
								<el-select class="input-cont" v-model="Model.userSelfLift.takeGoodsShop" filterable placeholder="请输入内容">
									<!-- 3.15修改为theFactory； xumeng -->
									<el-option v-for="(store,index) in Model.cityStore" :key="index" :label="store.theNameOfTheStore" :value="store.theFactory">
									</el-option>
								</el-select>
							</div>
						</el-col>
						<el-col :sm="12" :md="8" :lg="6">
							<div class="items">
								<label class="label" for="">
									<img class="required" src="@/assets/img/flower_red.png" alt="">
									自提时间
								</label>
								<el-date-picker class="input-cont" value-format="yyyy-MM-dd" v-model="Model.userSelfLift.takeGoodsTime" type="date"
								 placeholder="选择日期"></el-date-picker>
							</div>
						</el-col>
					</el-row>


				</div>
			</el-row>
			<!-- 第三步 自提end -->
			<!-- 第四步 -->
			<el-row class="steps">
				<div class="nav-title">
					<div class="number">4</div>
					<p class="font">第四步：添加支付信息</p>
					<img v-if="Model.fourthStep" @click="Model.fourthStep = !Model.fourthStep" class="img" src="@/assets/img/icon_collapse.png"
					 alt="">
					<img v-else @click="Model.fourthStep = !Model.fourthStep" class="img" src="@/assets/img/icon_unfold.png" alt="">
				</div>
				<div class="step-item" v-show="Model.fourthStep">
					<!-- 收货信息第一部分 -->
					<el-row class="rows basic2">
						<el-col>
							<div class="items payitem">
								<label class="" for="">应付总金额:</label>
								<label class="price" for="">¥{{Model.totlePrice}}</label>
                                <label class="r_label" for="">支付币种</label>
								<el-select class="input-cont" v-model="Model.coupon" placeholder="请输入内容">
									<el-option label="人民币" value="0"></el-option>
									<el-option label="港币" value="1"></el-option>
									<el-option label="欧元" value="2"></el-option>
								</el-select>
							</div>
						</el-col>
					</el-row>
					<el-row class="rows basic">
						<el-col>
							<div class="items payitem">
								<label class="selabel" for="">请选择支付方式</label>
								<span class="payMethod">
									<el-radio v-model="Model.params.isPosPay" label="1">pos机</el-radio>
									<el-radio v-model="Model.params.isPosPay" label="0">非pos机</el-radio>
								</span>
							</div>
						</el-col>
					</el-row>
				</div>
			</el-row>
			<!-- 第四步end -->
			<el-row class="bottom">
				<div class="btn_group">
					<div class="btn_item" @click="onConfirmNew">提交订单</div>
					<div class="btn_item cancel" @click="cancelOrder">取消订单</div>
				</div>
			</el-row>
		</div>
		<!-- 添加单个 商品弹框 -->
		<el-dialog title :visible.sync="Model.changeGoodsDialogFlag" class="changeGoodsDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">添加现货</div>
			</div>
			<advancedSearch :option="Model.filterOption1" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
			 @onExport="toExport"></advancedSearch>
			<div class="tables">
				<p class="dialogShopTitle">现货明细列表</p>
				<el-table stripe :data="Model.tableDataDialog" :row-style="selectedHighlight" max-height="550" @row-click="handleRowClick" @selection-change="handleSelectionChange">
					<el-table-column width="50" align="center" fixed>
						<template slot-scope="scope">
							<el-radio v-model="Model.dialogTableChecked" :label="scope.row">{{scope.row.id}}</el-radio>
						</template>
					</el-table-column>
					<el-table-column prop="photoUrl" align="center" label='主图'>
						<template slot-scope="scope">
							<div class="scopecont">
								<el-tooltip placement="top" effect="light">
									<div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
									<img class="mainTableImg" :src="scope.row.photoUrl" alt="">
								</el-tooltip>
							</div>
						</template>
					</el-table-column>
					<el-table-column v-for="(item,index) in Model.tableHeaderData2" align="center" :key="item.prop" :prop="item.prop"
					 :label="item.label" :width="item.width">
					</el-table-column>
				</el-table>
			</div>

			<div class="btn_group">
				<div class="btn_item" @click="addCommodity">添加商品</div>
				<div class="btn_item cancel" @click="Model.changeGoodsDialogFlag = false">取消添加</div>
			</div>

		</el-dialog>
		<!--  -->
		<!-- 添加预选 商品弹框 -->
		<el-dialog title :visible.sync="Model.changeGoodsDialogGroup" class="changeGoodsDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">添加预选清单商品</div>
			</div>
			<advancedSearch :option="Model.filterOption2" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
			 @onExport="toExport"></advancedSearch>
			<div class="tables">
				<p class="dialogShopTitle">预选清单明细列表</p>
				<el-table stripe :data="Model.tableDataDialogGroup" :row-style="selectedHighlight" max-height="550"
				 @selection-change="handleSelectionChange">
					<el-table-column type="selection" fixed="left" align="center" width="50">
					</el-table-column>
					<el-table-column align="center" prop="photoUrl" label='主图'>
						<template slot-scope="scope">
							<div class="scopecont">
								<el-tooltip placement="top" effect="light">
									<div slot="content"><img class="maxTableImg" :src="scope.row.photoUrl" alt=""></div>
									<img class="mainTableImg" :src="scope.row.photoUrl" alt="">
								</el-tooltip>
							</div>
						</template>
					</el-table-column>
					<el-table-column v-for="(item,index) in Model.tableHeaderData3" align="center" :key="item.prop" :prop="item.prop"
					 :label="item.label" :width="item.width">
					</el-table-column>
				</el-table>
			</div>

			<div class="btn_group">
				<div class="btn_item" @click="addCommodity">添加商品</div>
				<div class="btn_item cancel" @click="Model.changeGoodsDialogGroup = false">取消添加</div>
			</div>

		</el-dialog>
		<!--  -->
		<!-- 选择地址弹框 -->
		<el-dialog title :visible.sync="Model.changeAddress" class="chooseAddressDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">选择收货地址</div>
			</div>
			<div class="addressDialog">
				<div v-for="(item,index) in Model.params.saleReceivingList" :key="index" class="addressList">
					<el-radio v-model="Model.radioAddress" :label="item.id">
						<span>{{item.recipientName}}</span>
						<span>{{item.recipientPhone}}</span>
						<span v-if="item.defaultAddress == 1" class="defaultAddress">默认地址</span>
						<p>{{item.locationName}}{{item.detailedAddress}}</p>
					</el-radio>
				</div>
				<div class="btn_group">
					<div class="btn_item" @click="onChooseAddress">确定</div>
					<div class="btn_item cancel" @click="Model.changeAddress = false">取消</div>
				</div>
			</div>

		</el-dialog>
		<!--  -->
		<!--  -->
		<!-- pos非pos -->
		<el-dialog title :visible.sync="Model.payPos" class="payPosDialog">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">提交订单操作</div>
			</div>
			<div class="payPosContant">
				<p v-if="Model.params.isPosPay == '1'">支付时间72小时，请打开pos刷卡机，支付成功之后订单会自动同步支付信息</p>
				<p v-else>已提交订单，库存已锁定，请在三十分钟内支付完毕，否则库存会释放库存，超过72小时未支付此订单将自动关闭！</p>
			</div>
			<div class="btngroup">
				<div class="item-btn" @click="onConfirmSubmit(0)">确定</div>
				<div class="item-btn cancel" @click="Model.payPos = false">取消</div>
			</div>
			<div class="links" v-if="Model.params.isPosPay != '1'">
				你还可以
				<span class="msg" @click="toAddPayGift('addPay')">添加支付信息</span>
				或
				<span class="msg" @click="toAddPayGift('addGift')">添加赠品信息</span>
			</div>
		</el-dialog>
		<!--  -->

	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";

	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "newPage",
		mixins: [Model, Controller],
		components: {
			pathTracking,
			card,
			advancedSearch
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
<style>
	.sportnew .items .el-input__inner {
		height: 100%;
		line-height: 32px;
	}

	.sportnew .el-input {
		height: 100%;
	}

	.sportnew .el-date-editor {
		height: 100%;
		;
	}

	.payitem .el-input {
		width: 240px;
	}

	.sportnew .el-cascader {
		width: 100%;
		height: 32px;
	}

	.sportnew .changeGoodsDialog .el-dialog {
		height: 80%;
	}

	.sportnew .confirm-dialo .el-dialog {}
</style>
